<template>
  <div
    class="app"
    :class="{showContent:$route.path=='/register' || $route.path=='/login' }"
  >
    <TabBar
      :menus="menus"
      @toggleSearch="toggleSearch"
    >
      <UserInfo v-if="getWindow <= 768" />
      <div
        class="menu"
        v-for="(item,index) in menus"
        :key="index"
      >
        <router-link :to="routePath[index]"><span
            class="iconfont"
            v-html="fontImg[index]"
          ></span>{{item}}</router-link>
      </div>
    </TabBar>
    <BackTop v-if="getWindow > 768" />
    <MBackTop v-if="getWindow <= 768" />
    <Search
      v-if="isSearchShow"
      @toggleSearch="bgClick"
    />

    <router-view />

    <Footer />
    <!--音乐播放器 -->
  </div>
</template>

<script>
import TabBar from "components/TabBar.vue";
import Footer from "components/Footer.vue";
import BackTop from "components/BackTop.vue";
import Search from "components/Search.vue";
import UserInfo from "components/UserInfo";
import MBackTop from "components/MBackTop.vue";
import { mapState } from "vuex";

export default {
  components: {
    TabBar,
    Footer,
    BackTop,
    Search,
    UserInfo,
    MBackTop,
  },
  data() {
    return {
      menus: [
        "首页",
        "归档",
        "清单",
        "聊天室",
        "留言板",
        "友人帐",
        "关于",
        // "后院",
      ],
      routePath: [],
      fontImg: [
        "&#xe6e6;",
        "&#xe6b8;",
        "&#xe677;",
        "&#xe63a;",
        "&#xe60c;",
        "&#xe6bc;",
        "&#xe608;",
        // "&#xe607;",
      ],
      isSearchShow: false,
      windowWidth: 0,
    };
  },
  methods: {
    //切换搜索的显示与隐藏
    toggleSearch(isSearchShow) {
      this.isSearchShow = isSearchShow;
    },
    bgClick(isSearchShow) {
      this.isSearchShow = isSearchShow;
    },
  },
  created() {
    this.routePath = this.$router.options.routes;
    this.$store.commit("setWindowWidth", {
      value: document.documentElement.clientWidth,
    });
    this.$store.commit("setBackTop", {
      value: function () {
        let top = document.documentElement.scrollTop || document.body.scrollTop;
        // 实现滚动效果
        const timeTop = setInterval(() => {
          document.body.scrollTop =
            document.documentElement.scrollTop =
            top -=
              50;
          if (top <= 0) {
            clearInterval(timeTop);
          }
        }, 10);
      },
    });
  },
  mounted() {
    // dispath 异步用户数据
    this.$store.dispatch('getUser')
    //监听屏幕宽高改变
    window.addEventListener("resize", () => {
      //设置共享变量窗口宽度
      this.$store.commit("setWindowWidth", {
        value: document.documentElement.clientWidth,
      });
    });
  },
  computed: {
    ...mapState(["isLogin"]),
    getWindow() {
      return this.$store.getters.getWindowWidth.value;
    },
    async userInfo() {
      let res = await this.$http.getUserData();
      return res.data.result;
    },
  },
  provide() {
    return {
      userData: async () => await this.$http.getUserData(),
    };
  },
};
</script>

<style>
@import url("assets/css/base.css");

/* showContent */
.showContent {
  padding-top: 85.05px;
}
.menu {
  display: inline-block;
}
.menu::after {
  content: "";
  position: relative;
  bottom: 15px;
  display: block;
  width: 0rem;
  height: 5px;
  margin: 0 auto;
  background-color: orange;
  transition: 1s all cubic-bezier(0.46, 1, 0.23, 1);
}
.menu:hover::after {
  width: 5rem;
}
.container {
  display: flex;
  justify-content: center;
  /* padding: 50px 0; */
  padding: var(--mtop) 0;
  /* background-image: url('assets/img/kyotoanimation.png'); */
}
</style>
